<template>
  <a-modal v-bind:visible="isShowEditPhone" width="40%" title="修改手机号" @ok="handleOk" @ @cancel="onCancel">
    <span style="margin: 0 10px 0 0">原手机号：</span>
    <span> {{ viewPhone }} </span>
    <span style="margin: 0 10px 0 30px">变更手机号：</span>
    <span>
      <a-input v-model="phone" style="width: 180px" placeholder="请输入要变更的手机号"></a-input>
    </span>
  </a-modal>
</template>

<script>
import { changeGradeAPI } from '@/api/userinfo.js'
export default {
  name: 'EditPhone',
  props: {
    isShowEditPhone: {
      type: Boolean,
      default: false
    },
    viewId: {
      type: Number,
      default: undefined
    },
    viewPhone: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      phone: ''
    }
  },
  methods: {
    async handleOk() {
      try {
        await changeGradeAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids: this.viewId, phone: this.phone })
        this.$emit('upload')
        this.$emit('update:isShowEditPhone', false)
        this.$emit('update:viewId', undefined)
        this.$message.success('操作成功')
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    },
    onCancel() {
      this.$emit('update:isShowEditPhone', false)
      this.$emit('update:viewId', undefined)
    }
  }
}
</script>

<style lang="less" scoped></style>
